<template>
    <div class="tree-box-warp">
        <div>
            <div>
                <el-input
                    v-model="filterKeyText"
                    class="w-50 m-2"
                    placeholder="请输入关键字"
                    prefix-icon="el-icon-search"
                    size="mini"
                />
            </div>
            <div style="margin-top: 10px">
                <el-select
                    v-model="devId"
                    placeholder="请选择设备类型"
                    size="mini"
                    multiple
                    @change="handleDevTypeData"
                >
                    <el-option
                        v-for="item in facilityData"
                        :key="item.keyId"
                        :label="item.devName"
                        :value="item.keyId"
                    ></el-option>
                </el-select>
            </div>
            <div style="margin-top: 10px">
                <el-tree
                    ref="treeRef"
                    :data="treeData"
                    node-key="id"
                    :current-node-key="treeId"
                    highlight-current
                    default-expand-all
                    :filter-node-method="filterNode"
                    :props="defaultProps"
                    @node-click="handleTreeClick"
                >
                    <span slot-scope="{ node, data }" :title="node.name">
                        <!-- <el-tooltip :content="data.name" placement="top" effect="light"> -->
                        <div class="custom-tree-node">{{ data.name }}</div>
                        <!-- </el-tooltip> -->
                    </span>
                    <!-- <el-image
              v-if="data.img"
              style="width: 10px; height: 10px"
              :src="require('@/assets/solarPower/caomei.png')"
              fit="fill"
            /> -->
                    <!-- <span class="tree-node-span">{{ data.name }}</span> -->
                </el-tree>
            </div>
        </div>
    </div>
</template>
<script>
import { getPvTree, getPvDevTypeList } from "@/api/solarPower/index.js";
import { mapGetters } from "vuex";
export default {
    name: "tree",
    data() {
        return {
            defaultProps: {
                children: "obj",
                label: "name",
            },
            isShow: true,
            filterKeyText: "",
            treeId: null,
            devId: null,
            facility: null,
            facilityData: [],
            treeData: [],
        };
    },
    watch: {
        filterKeyText(val) {
            this.$refs.treeRef.filter(val);
        },
    },
    created() {
        // this.$store.commit("setState", 123456);
        // this.$store.dispatch("setParamsState", 12345);
    },
    mounted() {
        // if (!this.$store.state.solarPower.terrData) {
        this.getPvTree();
        this.getPvDevTypeList();
        // }
    },
    methods: {
        filterNode(value, data, _node) {
            if (!value) return true;
            return data.name.includes(value);
        },
        handleTreeClick(value, data, node) {
            this.$store.dispatch("setTreeState", {
                id: value?.id,
                keyId: value.keyId,
            });
            if (value.keyId == "1") {
                this.$router.replace({
                    path: "/subSystemResource/solarPower/deviceDetails/index",
                    // query: { id: value.id, keyId: this.devId },
                });
            } else if (value.keyId == "62") {
                this.$router.replace({
                    path: "/subSystemResource/solarPower/plantDetails/index",
                    // query: { id: value.id, keyId: this.devId },
                });
            } else {
                this.$router.replace({
                    path: "/subSystemResource/solarPower/overview/index",
                    // query: { id: value.id, keyId: this.devId },
                });
            }
            this.$emit("handleTree", value);
        },
        handleDevTypeData(val) {
            this.devId = val;
            let strDev = "";
            val.forEach((item, index) => {
                if (index == val.length - 1) {
                    strDev += item;
                } else {
                    strDev += item + ",";
                }
            });
            this.getPvTree(strDev);
        },
        getPvTree(strDev) {
            getPvTree({ keyId: strDev }).then((res) => {
                const { code, data, msg } = res.data;
                if (code == 200) {
                    if (data) {
                        this.$emit("treeDefaultId", data[0]?.id);
                    }
                    this.treeData = data;
                } else {
                    this.$message.error(msg);
                }
            });
        },
        getPvDevTypeList() {
            getPvDevTypeList({}).then((res) => {
                if (res.status == 200) {
                    this.facilityData = res.data;
                } else {
                    this.$message.error("系统错误");
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input {
    width: 180px;
}
.tree-box-warp {
    padding: 10px;
    display: flex;
    height: calc(100vh - 30px);
    .custom-tree-node {
        font-size: 12px;
        overflow: hidden; // 文字超长隐藏
        text-overflow: ellipsis; // 显示...
        white-space: nowrap; // 单行显示
    }
    // align-items: center;
    // border: 1px solid #ccc;
    // height: 100%;
    // height: calc(100vh);
}
</style>
